<template>
  <div>
    <myheader></myheader>
    <br><br>
    <!-- 面包屑导航 -->
    <Breadcrumb :datas='datas'></Breadcrumb>
    <br><br>
    <br><br>

    <el-form ref="userform" :model='user'
             label-position="left"
             :rules="rules"
             label-width="80px">
      <el-form-item label="username:" prop="username">
        <el-input v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="password:" prop="password">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="checkcode:" prop="checkcode">
        <el-input v-model="user.checkcode"></el-input>
        <img id='mycode' :src="imgsrc" @click="getImage" alt="验证码" widht="100">
      </el-form-item>
      <el-button type="primary" @click="reg">注册</el-button>
      <el-button type="warning" @click="cle">重置</el-button>
    </el-form>

    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br>
    <myfooter></myfooter>

  </div>
</template>


<script>
  import myheader from './myheader.vue';
  import myfooter from './myfooter.vue';
  import axios from 'axios'

  export default {
    name: 'Reg',
    data() {
      var checkPWD = (rule, value, callback) => {
        if (value == '') {
          return callback(new Error('请输入密码'))
        } else {
          if (value.length < 6) {
            return callback(new Error('密码不能少于6个字符'))
          } else {
            return callback();
          }
        }
      }
      return {
        //声明面包屑变量
        datas: [{title: '首页', route: {name: 'index'}}, {title: '注册页面'}],
        imgsrc: "http://127.0.0.1:8000/mycode/",
        user: {
          "username": '',
          "password": '',
          "checkcode": '',
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {validator: checkPWD, trigger: 'blur'}
          ],
          checkcode: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
          ]
        }
      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'myfooter': myfooter,
    },
    methods: {
      //重置按钮
      cle() {
        this.user.username = '';
        this.user.password = '';
        this.user.checkcode = '';
      },
      //注册按钮
      reg() {
        axios.get('http://127.0.0.1:8000/register/', {
          params: {
            username: this.user.username,
            password: this.user.password,
            mycode: this.user.checkcode
          }
        }).then(res => {
          console.log(res);
          this.$Message(res.data.data);
          if (res.data.code == 200) {
            this.$router.push('/login')
          }
        })
      },
      getImage() {
        // 随机字符串
        var num = Math.ceil(Math.random() * 10);
        // 赋值地址
        this.imgsrc = this.imgsrc + '?code' + num;
      }
    },
  }
</script>
